<style>
    .pageFormContent div input{
        width: 200px;
    }
    .pageFormContent{
        padding: 20px 30px 0 30px;
    }
    .pageFormContent label{
        width: 60px;
        text-align: right;
    }

</style>
<div class="pageContent">
	<form class="pageForm required-validate">
        {% csrf_token %}
		<div class="pageFormContent" layoutH="56">

			<div style="margin-bottom: 10px;">
                <label class="">角色名称: </label>
				<input name="name" class="required" type="text" placeholder="请输入角色名称" value="{{ roles_obj.name }}" />
			</div>
            <div style="margin-bottom: 10px;">
                <label class="">开通权限: </label>
                <div style="margin-top: 30px; margin-left: 15px; width: 400px; padding: 10px 0 0 50px;">
                    <div id="jstree"></div>
                </div>
            </div>
		</div>
		<div class="formBar">
			<ul>
				<!--<li><a class="buttonActive" href="javascript:;"><span>保存</span></a></li>-->
				<li><div class="buttonActive"><div class="buttonContent"><button type="button" id="button_save">保存</button></div></div></li>
				<li>
					<div class="button"><div class="buttonContent"><button type="button" class="close">取消</button></div></div>
				</li>
			</ul>
		</div>
	</form>
</div>



<script type="text/javascript">
    $('#jstree').jstree({
        "plugins" : ["checkbox"],   // 添加可以 checkbox 标签

        'core' : {
            'data' : {
                "url" : "{% url 'roles_management' %}json_data/0/",
                "dataType" : "json"
            }

        }
    });


    $("#button_save").click(function () {
        var $form = $(".pageContent form");
        if (!$form.valid()) {
            return false;
        }

        var instance = $('#jstree').jstree(true);
        var post_data = $(".pageContent form").serialize() + "&select_id=" + instance.get_selected();

        $.post("{% url 'roles_management' %}update/{{ o_id }}/", post_data, function (result) {
            dialogAjaxDone(result)
        }, 'json')

    })
</script>
